<template>
  <div>
    <header>
      <div id="header-left">
        <button id="switch" @click="$store.commit('asideSwitch')"><i  :class="!$store.state.aside?'el-icon-s-unfold':'el-icon-s-fold'"></i></button>
        <div id="logo">
          <h2 @click="$router.push('/home')" >< />SUREMON</h2>
        </div>
        <h5>寻梦招聘,更适合你的招聘平台</h5>
      </div>

      <div id="header-right">
        <div style="width: 40%;height:100%;display: flex;align-items: center">
          <div id="avatar">
            <img style="width: 100%;height: 100%;border-radius: 50%" src="../../assets/img/tab1.jpg" alt="">
          </div>
          <el-dropdown id="username" @command="handleCommand">
               <span class="el-dropdown-link">
               {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="/setting">个人中心</el-dropdown-item>
              <el-dropdown-item v-if="userType=='university'" command="/admin/university">学生管理</el-dropdown-item>
              <el-dropdown-item v-if="userType=='company'" command="/admin/company">后台管理</el-dropdown-item>
              <el-dropdown-item><span  @click="logOut()">退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <span style="color:rgb(116,116,116)"><i class="el-icon-user">{{type}}</i></span>
        <el-badge :value="2" :max="99" class="item">
          <i style="font-size: 22px;cursor:pointer;" class=" el-icon-message"></i>
        </el-badge>
        <i  @click="$store.commit('sunSwitch')"  style="cursor: pointer;float: right;font-size: 21px;" :class="$store.state.isSun?'el-icon-moon':'el-icon-sunny'"></i>

      </div>

    </header>
  </div>
</template>

<script>
import {logout} from "../../network/user";

export default {
  name: "TopBar",
  data(){
    return{
      userType:localStorage.getItem('userType'),
      type:''
    }
  },
  computed:{
    userName(){
      return localStorage.getItem('userName')
    }
  },
  created() {
    this.getIdentity()
  },
  methods:{
    logOut(){logout().then(res=>this.$store.commit("CLEAN_TOKEN"))},

    handleCommand(command){this.$router.push(command)},

    getIdentity(){
      let type=localStorage.getItem("userType")
      if(type=='university'){
        this.type='高校'
      }else if(type=='company'){
        this.type='企业'
      }else
        this.type='学生'
    }
  }
}
</script>

<style scoped>
#logo {
  float: left;
  width: 140px;
  height: 60px;
  background-image: -webkit-linear-gradient(left, #ff7878, #ffa93f 10%, #fff8a2 20%, #9aff5b 30%, #cfffcf 40%, #a6ffff 50%, #CCCCFF 60%, #c6f7ff 70%, #a2ffd8 80%, #67ffb2 90%, #ffa85c 100%);
  -webkit-text-fill-color: transparent; /* 将字体设置成透明色 */
  -webkit-background-clip: text; /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 12s linear infinite;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
header {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 15%;
  width: 100%;
  height: 65px;
  background-color: rgba(255, 255, 255, .4);
  top: 0;
  opacity: 1;
  position: fixed;
  z-index: 5;
}
#header-right{
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#switch{
  display: none;
}
header * {
  margin: 0;
  padding: 0;
}

header h2 {
  cursor: pointer;
  float: left;
  color: rgba(57, 162, 245);
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 65px;
}

header h5 {
  float: left;
  color: rgb(116,116,116);
  line-height: 70px;
  margin-left: 70px;
  font-family: 'ZCOOL XiaoWei', serif;
}
#avatar {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}
#username{
  cursor: pointer;
}

#avatar img:hover {
  cursor: pointer;
  transition: all 1s;
  transform: rotate(360deg);
  transform-origin: center;
}
@media screen and (max-width: 500px) {
  header{
    padding: 0 5%;
    text-align: center;
    display: flex;
    justify-content: left;
  }
  #header-right{
    display: none;
  }
  #switch{
    display: block;
    width: 30%;
    font-size: 25px;
    background-color:rgba(0,0,0,0);
    text-align: left;
    border: none;
    outline: none;
  }
  #aside{
    font-size: 12px;
    width: 35%;
    transition: all .3s ease-out;
    position: static;
    margin-left: 0;
  }
  #aside2{
    font-size: 12px;
    width: 35%;
    transition: all .3s ease-in;
    position: static;
    margin-left: -35%;
  }

}
</style>